<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值  {{}}</title>
    <!--导入vue.js-->
    <script src="../lib/vue-2.6.12.js"></script>
</head>
<body>

<div id="app">
    <!--使用插值语法，将data中的数据替换到其中-->
    <h2>{{message1}} {{message2}}</h2>

    <div v-text="msg">
        <!--原本的内容-->
        <!--这里会被msg替换，但只当成纯文本-->
        hello world!
    </div>
    <div v-html="msg">
        <!--原本的内容-->
        hello world!
    </div>
</div>


<script>
    // 实例化一个vue
    var vm = new Vue({
        // 找到id=app这个盒子，并把他交给vue管理
        el:'#app',
        // vue里放数据的地方
        data:{
            // 放入数据
            message1: 'hello',
            message2: 'world!',
            msg: '<h2>我是替换的内容</h2>'
        },
        methods:{

        }
    })
</script>

</body>
</html>